<template>
	<!-- 物资管理列表 -->
	<view>
		<view class="page">
			<view class="example-body">
				<uni-nav-bar background-color="#003466" color="#ffffff" :status-bar="true" @click-left="back" left-icon="arrowleft" style="position: relative;">
					<view class="flex-item">应急管理详情</view>
					<!-- <view class="flex-item flex-right" style="position: absolute;top: 22px;right: 22px;">
						<uni-icon type="bars" size="24" color="#ffffff" @click="show('right')"></uni-icon>
					</view> -->
				</uni-nav-bar>
			</view>
			<view class="emergency-container">
				<view class="emergency-option">
					<view class="emergency-left">事件名称</view>
					<view class="emergency-right">{{ objData.eventName }}</view>
				</view>
				<view class="emergency-option">
					<view class="emergency-left">事件类型</view>
					<view class="emergency-right">{{ objData.type }}</view>
				</view>
				<view class="emergency-option">
					<view class="emergency-left">事件来源</view>
					<view class="emergency-right">{{ objData.origin }}</view>
				</view>
				<view class="emergency-option">
					<view class="emergency-left">开始时间</view>
					<view class="emergency-right">{{ objData.startTime ? objData.startTime : '--' }}</view>
				</view>
				<view class="emergency-option">
					<view class="emergency-left">结束时间</view>
					<view class="emergency-right">{{ objData.endTime ? objData.endTime : '--' }}</view>
				</view>
				<view class="emergency-option">
					<view class="emergency-left">事件描述</view>
					<view class="emergency-right">{{ objData.description }}</view>
				</view>
				<view class="emerygency-jd">
					<view class="emerygency-rel">
						<view v-for="(item, index) in infData" :key="index" @click="stepChange(index)">
							<view class="emerygency-center">
								<view class="emerygency-smallzero" :class="activeClass == index ? 'activezero' : ''" @click="changeZero(index)">{{ index + 1 }}</view>
							</view>
							<view class="emerygency-words">{{ item.stepContent }}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="index-list">
				<view class="index-option" v-for="(items, index) in optionData" :key="index">
					<view class="option-container">
						<view class="container_index"></view>
						<view class="index_bottomwords">{{ items.taskName }}</view>
						<view class="index-pic"><image src="../../../static/images/wjs.png" mode=""></image></view>
					</view>
					<view class="option_index-words">{{ items.taskContent }}</view>
					<view class="open-bottom-words">{{ items.endTime ? items.endTime : '' }}</view>
					<view class="opem-choose">
						<view class="opem-choosetwo">查看详情</view>
						<view class="opem-chooseone">接收</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue';
import uniIcon from '@/components/uni-icon/uni-icon.vue';
import tools from '@/common/tools-new.js';
export default {
	data() {
		return {
			listParam: {
				parameter: '',
				operators: '',
				queryValue: '',
				pageSize: 8,
				pageIndex: 1,
				orderBy: 'startTime',
				orderByType: '1'
			},

			activeClass:-1,

			objData: [],

			infData: [],

			optionData: [],

			dic_data: [
				{
					name: '应急类型',
					data: []
				},
				{
					name: '事件来源',
					data: []
				}
			],

			//事件来源
			innerInfo: [],

			//待处理任务
			listData: []
		};
	},
	components: {
		uniNavBar,
		uniIcon
	},
	methods: {
		//数据来源
		getOptionList(id) {
			let param = { id: id };
			this.$api.EmaryManage.EmeryOption(param).then(res => {
				// console.log(res);
				this.objData = res[1].data.result;
				// console.log(res[1].data.result.steps);

				if (this.objData.steps.length > 0) {
					this.infData = this.objData.steps; //步骤进度
					this.optionData = this.objData.steps[0].tasks;
				}

				// // console.log(res[1].data.result.steps.tasks);
				// var data = res[1].data.result.steps;
				// for (var i = 0; i < data.length; i++) {
				// 	var tasks = data[i].tasks;
				// 	for (var j = 0; j < tasks.length; j++) {
				// 		//这里是你要取的tasks数组里的字段数据，比如task里面的a就是task[j].a
				// 		// console.log(tasks)
				// 		this.optionData = tasks;
				// 	}
				// }

				//取所属系统名称
				if (this.objData != null) {
					this.objData.type = this.$helper.getTextByValue('应急类型', this.objData.type);
					this.objData.origin = this.$helper.getTextByValue('事件来源', this.objData.origin);
					this.objData.startTime = this.$helper.dateFormat(this.objData.startTime, false);
					this.objData.endTime = this.$helper.dateFormat(this.objData.endTime, false);
				}
			});
		},

		//点击步骤显示相应任务

		back() {
			uni.navigateBack({
				delta: 1
			});
		},
		/*
		 *点击步骤事件获取任务列表
		 */
		stepChange(index) {
			this.optionData = this.objData.steps[index].tasks;
			console.log(this.optionData);
		},
		changeZero(index){
			this.activeClass = index
		}
	},

	onLoad: function(option) {
		this.getOptionList(option.id);
	}
};
</script>

<style>
page {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	background-color: #f2f2f2;
}

.flex-item {
	font-size: 20px;
	text-align: center;
}

.uni-icon {
	padding-left: 42%;
}

.uni-navbar__header-btns:last-child {
	width: 120px;
}

.uni-navbar__header-btns {
	padding: 0;
}

.supply-option .option-right image {
	max-width: 100%;
	max-height: 100%;
}

.new-zeracolor {
	width: 8px;
	height: 8px;
	background-color: #e75f5f;
	border-radius: 50%;
	float: left;
	margin: 6px;
	background-color: #3c99e7;
}

.three-zeracolor {
	background-color: #458cd0;
}

.title-draw {
	font-size: 14px;
	color: #333333;
	padding-left: 10px;
}

.emergency-container {
	width: 94%;
	margin: 0 auto;
	background-color: #ffffff;
	margin-top: 10px;
	border-radius: 3px;
}

.emergency-option {
	overflow: hidden;
	border-bottom: 1px solid #eeeeee;
	width: 96%;
	margin: 0 auto;
	padding: 16px 0px;
}

.emergency-left {
	color: #666666;
	font-size: 16px;
	float: left;
}

.emergency-right {
	color: #666666;
	font-size: 16px;
	float: right;
}

.emerygency-jd {
	width: 96%;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
}

.emerygency-smallzero {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background-color: #f2f2f2;
	text-align: center;
	line-height: 50px;
	font-size: 14px;
	color: #bcbcbc;
}

.activezero {
	background-color: #3c99e7;
	color: #ffffff;
}

.emerygency-words {
	font-size: 13px;
	color: #333333;
	text-align: center;
	margin-top: 10px;
}

.emerygency-rel {
	width: 100%;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	position: relative;
	padding-top: 16px;
	padding-bottom: 16px;
}

.emerygency-center {
	display: flex;
	justify-content: center;
	align-items: center;
}

.index-list {
	width: 94%;
	margin: 0 auto;
	margin-bottom: 10px;
}

.index-list .index-option {
	width: 100%;
	background-color: #ffffff;
	margin: 0 auto;
	margin-top: 10px;
	border-radius: 3px;
}

.index-list .index-option {
	width: 100%;
	background-color: #ffffff;
	margin: 0 auto;
	margin-top: 10px;
	border-radius: 3px;
}

.option-container {
	overflow: hidden;
	padding: 10px;
}

.container_index {
	width: 10px;
	height: 10px;
	background-color: #e75f5f;
	border-radius: 50%;
	float: left;
	margin: 6px;
}

.index_bottomwords {
	font-size: 16px;
	color: #333333;
	float: left;
}

.index-pic {
	width: 50px;
	height: 20px;
	display: flex;
	justify-content: center;
	align-items: center;
	float: right;
	margin-top: 1.3px;
}

.index-pic image {
	max-width: 96%;
	max-height: 100%;
}

.option_index-words {
	font-size: 15px;
	color: #999999;
	padding-left: 15px;
}

.open-bottom-words {
	font-size: 15px;
	color: #999999;
	padding-left: 15px;
	padding-top: 10px;
}

.opem-choose {
	width: 100%;
	height: 26px;
	margin-top: 12px;
	padding-bottom: 16px;
}

.opem-chooseone {
	width: 64px;
	height: 30px;
	background: #458cd0;
	color: #ffffff;
	text-align: center;
	line-height: 30px;
	font-size: 12px;
	border-radius: 3px;
	float: right;
	margin-right: 8px;
}

.opem-choosetwo {
	width: 64px;
	height: 30px;
	border: 1px solid #458cd0;
	color: #458cd0;
	font-size: 12px;
	text-align: center;
	line-height: 30px;
	float: right;
	border-radius: 3px;
	margin-right: 10px;
}
</style>
